/* eslint-disable no-unused-vars */
<template>
  <div class="dscreen-chart" id="chart" style="width: 400px; height: 216px"></div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import * as echarts from 'echarts/core'
import { EChartsType, EChartsOption } from 'echarts/types/dist/shared'
import {
  // BarChart,
  // 系列类型的定义后缀都为 SeriesOption
  // LineChart,
  // LineSeriesOption,
  PieChart
} from 'echarts/charts'
import {
  TitleComponent,
  // 组件类型的定义后缀都为 ComponentOption
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer
])

// enum OrientType {
//   /**
//    * 水平方向
//    */
//   horizontal = 'horizontal',

//   /**
//    * 竖直方向
//    */
//   vertical = 'vertical'
// }
const state = reactive({
  chartsData: [
    {
      name: '阿里',
      value: 2.24
    },
    {
      name: '腾讯',
      value: 3.38
    },
    {
      name: '字节',
      value: 1.75
    },
    {
      name: '1阿里',
      value: 2.24
    },
    {
      name: '字节1',
      value: 1.75
    },
    {
      name: '1阿里2',
      value: 2.24
    }
  ]
})

onMounted(() => {
  const dom = document.getElementById('chart')
  let myChart: EChartsType | null = null
  if (dom) {
    myChart = echarts.init(dom)
    const options: EChartsOption = {
      // 每个饼的颜色
      color: ['#FA6400', '#44D7B6', '#0091FF', '#6DD400', '#F7B500'],

      // 整个div的背景颜色
      backgroundColor: '#dee1e6',
      grid: {
        left: '50%'
        // right: "0%",
        // bottom: "0%",
        // top: "12%",
        // containLabel: true,
      },
      tooltip: {
        trigger: 'item',
        // 选中单项时的显示样式
        formatter: `{a} <br/>{b} : {c}万亿 ({d}%)`
      },
      // 分类块列表显示位置
      legend: {
        // 水平和竖直
        orient: 'horizontal',

        type: 'scroll', // 默认值为plain，图例过多时，使用scroll，有分页效果所以直接用scroll
        right: 5,
        textStyle: {
          color: 'black'
        }
      },
      series: [
        {
          name: '企业市值',
          type: 'pie',
          radius: ['45%', '60%'],
          center: ['50%', '50%'],
          avoidLabelOverlap: true,
          label: {
            show: true,
            color: 'red',
            formatter(data: any) {
              console.log(data, 'sssss')
              const { name, value } = data
              return `${name} ${value}万亿`
            }
          },
          data: state.chartsData
        }
      ]
    }
    // 绘制图表
    myChart.setOption(options)
  }
})
</script>

<style lang="scss" scoped>
.dscreen-chart {
  border: 1px solid red;
}
</style>
